<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>04_尚品汇-获取到视口的距离方法</title>
        <style>
            .outer {
                position: relative;
                width: 500px;
                height: 500px;
                background-color: aqua;
                padding: 20px;
            }

            .inner {
                position: absolute;
                width: 300px;
                height: 300px;
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner">

            </div>
        </div>

        <script>
            var inner = document.querySelector('.inner');
            // 如果子绝父相  那么小盒子拿到的偏移量是相对父盒子的
            // 如果我想拿到到视口的可以直接使用getBoundingClientRect方法
            console.log(inner.offsetLeft);
            console.log(inner.offsetTop);

            console.log(inner.getBoundingClientRect().left);
            console.log(inner.getBoundingClientRect().x);

            console.log(inner.getBoundingClientRect().top);
            console.log(inner.getBoundingClientRect().y);

        </script>
    </body>
</html>